<template>
  <el-dialog
    title="添加角色"
    :visible.sync="addRoleDialog"
    width="781px"
    class="dialogTitle addRoldDialog"
    @closed="dialogClosed('addForm')"
  >
    <el-form label-width="80px" ref="addForm" :model="dialogData" :rules="rules">
      <el-form-item label="角色名称" class="el-form-item-text" prop="roleName">
        <el-input placeholder="必填，请填写角色名称" v-model="dialogData.roleName"></el-input>
      </el-form-item>
      <el-form-item label="权限字符" prop="permissionCharacter">
        <el-input
          placeholder="必填，请填写权限字符"
          v-model="dialogData.permissionCharacter"
        ></el-input>
        <el-alert
          title='控制器中定义的权限字符，如：@RequiresRoles("")'
          type="warning"
          show-icon
          :closable="false"
        >
        </el-alert>
      </el-form-item>
      <el-form-item label="显示顺序" prop="displayOrder">
        <el-input placeholder="必填，请填写显示顺序" v-model="dialogData.displayOrder"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="roleStatus">
        <label slot="label">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态</label>
        <el-switch v-model="dialogData.roleStatus" active-color="#006EFF" inactive-color="#B4B4B4">
        </el-switch>
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <label slot="label">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</label>
        <el-input placeholder="选填，请填写备注" v-model="dialogData.remarks"></el-input>
      </el-form-item>
      <el-form-item label="菜单权限" prop="checkList">
        <el-checkbox
          label="展开/折叠"
          v-model="dialogData.unfoldCollapse"
          @change="unfoldCollapseClick($event, 'menu')"
        ></el-checkbox>
        <el-checkbox
          label="全选/全不选"
          v-model="dialogData.selectAll"
          @change="selectAllClick"
        ></el-checkbox>
        <el-checkbox label="父子联动" v-model="dialogData.linkage"></el-checkbox>
      </el-form-item>
      <el-form-item prop="data">
        <div class="selectTreeSection">
          <el-tree
            :data="dialogData.data"
            show-checkbox
            node-key="id"
            :props="dialogData.defaultProps"
            ref="addTree"
            :check-strictly="!dialogData.linkage"
            :default-expand-all="true"
          >
          </el-tree>
        </div>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <cs-btn
        type="primary"
        @click.native="confirmBtnClick('addForm')"
        btnText="确定"
        class="confirm_btn dialog_btn"
      />
      <cs-btn @click.native="cancelBtnClick('addForm')" btnText="取消" class="dialog_btn" />
    </div>
  </el-dialog>
</template>

<script>
import csBtn from '@/components/cs-btn/cs-btn.vue'

export default {
  components: {
    csBtn
  },
  data() {
    return {
      addRoleDialog: false,
      treeDataID: [],
      dialogData: {
        roleName: '',
        // 权限字符
        permissionCharacter: '',
        // 显示顺序
        displayOrder: '',
        roleStatus: false,
        remarks: '',
        // 展开/折叠
        unfoldCollapse: true,
        // 全选/全不选
        selectAll: false,
        // 父子联动
        linkage: false,
        // 菜单权限/树形结构
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        data: [
          {
            id: 1,
            label: '一级 1',
            children: [
              {
                id: 4,
                label: '二级 1-1',
                children: [
                  {
                    id: 9,
                    label: '三级 1-1-1'
                  },
                  {
                    id: 10,
                    label: '三级 1-1-2'
                  }
                ]
              }
            ]
          },
          {
            id: 2,
            label: '一级 2',
            children: [
              {
                id: 5,
                label: '二级 2-1'
              },
              {
                id: 6,
                label: '二级 2-2'
              }
            ]
          },
          {
            id: 3,
            label: '一级 3',
            children: [
              {
                id: 7,
                label: '二级 3-1'
              },
              {
                id: 8,
                label: '二级 3-2'
              }
            ]
          }
        ]
      },
      rules: {
        roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
        permissionCharacter: [{ required: true, message: '请输入权限字符', trigger: 'blur' }],
        displayOrder: [{ required: true, message: '请输入显示顺序', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.$bus.$on('addRoleDialogVisible', () => {
      this.addRoleDialog = true
    })
  },
  methods: {
    // 对话框关闭事件
    dialogClosed(formName) {
      this.resetForm(formName)
    },
    confirmBtnClick(formName) {
      this.addRoleDialog = false
      this.resetForm(formName)
    },
    cancelBtnClick(formName) {
      this.addRoleDialog = false
      this.resetForm(formName)
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 展开/折叠点击事件
    unfoldCollapseClick(value, type) {
      const treeList = this.dialogData.data
      for (let i = 0; i < treeList.length; i++) {
        this.$refs.addTree.store.nodesMap[treeList[i].id].expanded = value
        this.$refs.addTree.root.expanded = value
      }
    },
    // 全选/全不选点击事件
    selectAllClick() {
      if (this.dialogData.selectAll) {
        // 递归获取所有的el-tree数据id
        this.getAllTreeID(this.dialogData.data)
        // 给el-tree设置权限
        this.$refs.addTree.setCheckedKeys(this.treeDataID)
      } else {
        this.$refs.addTree.setCheckedKeys([])
      }
    },
    // 递归选中所有的树形id
    getAllTreeID(arr) {
      arr.forEach((item) => {
        if (item.children) {
          this.treeDataID.push(item.id)
          this.getAllTreeID(item.children)
        } else {
          this.treeDataID.push(item.id)
        }
      })
    }
  }
}
</script>

<style scoped>
.el-select >>> .el-input__inner {
  border-radius: 0;
}

.el-input >>> .el-input__inner {
  border-radius: 0;
}

.el-form-item >>> .el-form-item__label {
  color: #888888;
}

.el-form-item >>> .el-form-item__error {
  padding-top: 2px;
}

.el-textarea >>> .el-textarea__inner {
  border-radius: 0;
}

/* 添加角色对话框样式start */
.el-alert {
  background-color: #fff;
  padding: 0;
  height: 24px;
  color: #888888;
}

.addRoldDialog .el-form-item {
  margin-bottom: 16px;
}

.addRoldDialog .el-form-item:nth-child(2) {
  margin-bottom: 0;
}

.addRoldDialog .el-form-item:nth-child(3),
.addRoldDialog .el-form-item:nth-child(4) {
  margin-bottom: 8px;
}

.addRoldDialog .el-form-item:nth-child(6) {
  margin-bottom: 0;
}

.addRoldDialog .el-form-item:last-child {
  margin-bottom: 37px;
}

/* checkbox样式 */
.el-checkbox >>> .el-checkbox__inner::after {
  top: 0;
  left: 3px;
  border: 3px solid #fff;
  border-left: 0;
  border-top: 0;
  width: 4px;
}

.el-checkbox >>> .el-checkbox__label {
  color: #606266;
}

.selectTreeSection {
  width: 626px;
  height: 416px;
  border: 1px solid #dddddd;
  overflow: scroll;
}

.addRoldDialog >>> .el-dialog__title {
  color: #006eff;
}

.addRoldDialog >>> .el-dialog__body {
  padding: 32px 30px 39px 30px;
}

/* 更改树形结构的图标和旋转角度 */
.el-tree >>> .el-icon-caret-right:before {
  content: '\e78f';
}

.el-tree >>> .expanded {
  transform: rotate(180deg);
}

.el-tree >>> .el-checkbox__inner::after {
  border: 3px solid #fff;
  border-left: 0;
  border-top: 0;
  top: 0;
  left: 3px;
  width: 4px;
}

.el-tree >>> .el-checkbox__inner::before {
  width: 18px;
  height: 4px;
  left: -3px;
  top: 4px;
}

/* 去掉switch外层的div溢出隐藏 */
.el-table >>> .cell {
  overflow: visible;
}

/* 设置switch的宽高边框 */
.el-switch >>> .el-switch__core {
  width: 28px !important;
  height: 14px;
  border: 2px solid #dddddd !important;
}

/* 设置switch圆形按钮的宽高边框位置 */
.el-switch >>> .el-switch__core:after {
  top: -4px;
  width: 14px;
  height: 14px;
  border: 2px solid #dddddd;
}

/* 设置switch圆形按钮的激活位置 */
.el-switch.is-checked >>> .el-switch__core::after {
  left: 106%;
}

/* 设置switch圆形按钮的关闭位置 */
.el-switch >>> .el-switch__core:after {
  left: -2px;
}
</style>
